<!DOCTYPE html>
<html>

<head>
    <title>成绩分析系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script> <!-- 导入SheetJS库 -->
    <style>
        body {
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            background-color: #f2f2f2;
        }

        .container {
            width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        h1 {
            font-size: 36px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }

        .upload-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            border: 2px dashed #ccc;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .upload-icon {
            font-size: 48px;
            color: #ccc;
        }

        .upload-text {
            font-size: 18px;
            color: #666;
            margin-top: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th {
            background-color: #008CBA;
            color: white;
            padding: 10px;
        }

        td {
            text-align: center;
            padding: 10px;
            border: 1px solid #ccc;
        }

        th:first-child,
        td:first-child {
            position: sticky;
            left: 0px;
            background-color: #f2f2f2;
            z-index: 1;
        }

        th:last-child,
        td:last-child {
            background-color: #f2f2f2;
        }

        tr:last-child td {
            font-weight: bold;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        input[type="number"] {
            width: 60px;
            margin-right: 10px;
            text-align: center;
            vertical-align: middle;
        }

        input[type="submit"] {
            padding: 8px 16px;
            font-size: 16px;
            background-color: #008CBA;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #0077A3;
        }

        .export-btn {
            display: inline-block;
            padding: 8px 16px;
            font-size: 16px;
            background-color: #008CBA;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }

        .export-btn:hover {
            background-color: #0077A3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>成绩分析系统</h1>
        <div>
            <label for="full-score-input">满分：</label>
            <input type="number" id="full-score-input" min="1" max="100" step="1" value="100">
        </div>
        <form id="input-form">
            <div>
                <label for="score-input">成绩：</label>
                <input type="number" id="score-input" min="0" max="100" step="1" required>
            </div>
            <div>
                <label for="name-input">姓名：</label>
                <input type="text" id="name-input" required>
            </div>
            <input type="submit" value="分析">
        </form>
        <table id="result-table" style="display: none;"></table>
        <button class="export-btn" onclick="exportTable()">导出表格</button>
    </div>

    <script>
        var fullScoreInput = document.getElementById("full-score-input");
        var inputForm = document.getElementById("input-form");
        var resultTable = document.getElementById("result-table");
        var rows = [];

        inputForm.addEventListener("submit", function(event) {
            event.preventDefault();
            var scoreInput = document.getElementById("score-input");
            var nameInput = document.getElementById("name-input");
            var score = parseInt(scoreInput.value);
            var name = nameInput.value;
            var fullScore = parseInt(fullScoreInput.value);
            if (!isNaN(score) && name !== "") {
                rows.push([name, score, fullScore]);
                showResult(rows, fullScore);
                scoreInput.value = "";
                nameInput.value = "";
            }
        });

        function showResult(result, fullScore) {
            // 以下是成绩分析的代码
            var header = ["姓名", "成绩", "得分率"];
            var rowCount = result.length;
            var colCount = header.length;
            var totalScore = 0;
            var maxScore = -Infinity;
            var minScore = Infinity;

            for (var i = 0; i < rowCount; i++) {
                var row = result[i];
                var score = parseInt(row[1]);
                totalScore += score;
                maxScore = Math.max(maxScore, score);
                minScore = Math.min(minScore, score);
            }

            var averageScore = totalScore / rowCount;
            var passingCount = 0;

            for (var i = 0; i < rowCount; i++) {
                var row = result[i];
                var score = parseInt(row[1]);
                if (score >= 60) {
                    passingCount++;
                }
            }

            var passRate = passingCount / rowCount * 100;
            passRate = passRate.toFixed(2); // 保留两位小数

            // 以下是将成绩分析结果展示在表格中的代码
            var tableHtml = "";
            tableHtml += "<tr>";
            for (var i = 0; i < colCount; i++) {
                tableHtml += "<th>" + header[i] + "</th>";
            }
            tableHtml += "</tr>";
            for (var i = 0; i < rowCount; i++) {
                var row = result[i];
                var score = parseInt(row[1]);
                var fullScore = parseInt(row[2]);
                var percentage = score / fullScore * 100;
                percentage = percentage.toFixed(2); // 保留两位小数
                tableHtml += "<tr>";
                tableHtml += "<td>" + row[0] + "</td>";
                tableHtml += "<td>" + row[1] + "</td>";
                tableHtml += "<td>" + percentage + "%</td>";
                tableHtml += "</tr>";
            }
            tableHtml += "<tr>";
            tableHtml += "<td>平均分：</td>";
            tableHtml += "<td>" + averageScore.toFixed(2) + "</td>";
            tableHtml += "<td></td>";
            tableHtml += "</tr>";
            tableHtml += "<tr>";
            tableHtml += "<td>最高分：</td>";
            tableHtml += "<td>" + maxScore + "</td>";
            tableHtml += "<td></td>";
            tableHtml += "</tr>";
            tableHtml += "<tr>";
            tableHtml += "<td>最低分：</td>";
            tableHtml += "<td>" + minScore + "</td>";
            tableHtml += "<td></td>";
            tableHtml += "</tr>";
            tableHtml += "<tr>";
            tableHtml += "<td>及格率：</td>";
            tableHtml += "<td>" + passRate + "%</td>";
            tableHtml += "<td></td>";
            tableHtml += "</tr>";

            resultTable.innerHTML = tableHtml;
            resultTable.style.display = "table";
        }

        function exportTable() {
            var data = [["姓名", "成绩", "得分率"]];
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var name = row[0];
                var score = row[1];
                var fullScore = row[2];
                var percentage = score / fullScore * 100;
                percentage = percentage.toFixed(2); // 保留两位小数
                data.push([name, score, percentage + "%"]);
            }
            var ws = XLSX.utils.aoa_to_sheet(data, { header: 1 });
            var wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            XLSX.writeFile(wb, "成绩表.xlsx");
        }
    </script>
</body>
</html>
